<template>
  <div class="message-notification">
    <el-badge :value="unreadCount" :hidden="unreadCount === 0" :max="99" class="badge-item">
      <el-tooltip content="消息通知" effect="dark" placement="bottom">
        <div class="bell-icon" :class="{ 'bell-shake': unreadCount > 0 }" @click="handleOpenDialog">
          <el-icon :size="20">
            <Bell />
          </el-icon>
        </div>
      </el-tooltip>
    </el-badge>

    <el-dialog v-model="dialogVisible" title="消息通知" width="600px" :close-on-click-modal="false">
      <div class="message-list">
        <el-empty v-if="messageList.length === 0" description="暂无消息" />
        <div v-else class="message-container">
          <div
            v-for="item in messageList"
            :key="item.id"
            class="message-item"
            :class="{ unread: item.msgStatus === '1' }"
            @click="handleReadMessage(item)">
            <div class="message-header">
              <span class="message-title">接收人：{{ item.receiver }}</span>
              <span class="message-time">{{ item.createTime }}</span>
            </div>
            <div class="message-content">{{ item.content }}</div>
            <div class="message-footer">
              <el-tag v-if="item.msgStatus === '1'" size="small" type="warning">未读</el-tag>
              <el-tag v-else size="small" type="success">已读</el-tag>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button @click="handleMarkAllRead" :disabled="unreadCount === 0">全部标记为已读</el-button> -->
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Bell } from '@element-plus/icons-vue'
import { getMessageList, markMessageRead, markAllRead } from '@/api/message'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 消息列表
const messageList = ref([])
// 对话框显隐
const dialogVisible = ref(false)

// 计算未读消息数量
const unreadCount = computed(() => {
  return messageList.value.filter(item => item.msgStatus === '1').length
})

// 获取消息列表
const fetchMessageList = async () => {
  const response = await getMessageList()
  messageList.value = response.rows || []
}

// 打开对话框
const handleOpenDialog = () => {
  // dialogVisible.value = true
  // fetchMessageList()
  router.push({ path: '/system/message' })
}

// 标记消息为已读
const handleReadMessage = async item => {
  if (item.msgStatus === '2') return

  await markMessageRead({ id: item.id })
  item.msgStatus = '2'
  ElMessage.success('消息已标记为已读')
  fetchMessageList()
}

// 全部标记为已读
const handleMarkAllRead = async () => {
  try {
    await markAllRead()
    messageList.value.forEach(item => {
      item.msgStatus = '2'
    })
    ElMessage.success('所有消息已标记为已读')
  } catch (error) {
    console.error('批量标记已读失败:', error)
    // 模拟标记成功
    messageList.value.forEach(item => {
      item.msgStatus = '2'
    })
  }
}

// 组件挂载时获取消息
onMounted(() => {
  fetchMessageList()
})

// 定时刷新消息列表(可选)
// setInterval(() => {
//   if (!dialogVisible.value) {
//     fetchMessageList()
//   }
// }, 60000) // 每分钟刷新一次
</script>

<style lang="scss" scoped>
.message-notification {
  display: inline-flex;
  align-items: center;
  height: 100%;

  .badge-item {
    height: 100%;
    display: flex;
    align-items: center;

    :deep(.el-badge__content) {
      margin-top: 20px;
      min-width: 16px;
      height: 16px;
      padding: 0 3px;
    }

    .bell-icon {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      transition: all 0.3s;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      :deep(.el-icon) {
        color: #fff;
      }

      // 震动动画
      &.bell-shake {
        animation: shake 1s ease-in-out, shake-interval 3s infinite;
      }
    }
  }

  :deep(.el-badge__content) {
    border: 1px solid #fff;
  }
}

// 震动关键帧动画
@keyframes shake {
  0%,
  100% {
    transform: rotate(0deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-15deg);
  }
  20%,
  40%,
  60%,
  80% {
    transform: rotate(15deg);
  }
}

// 间隔震动动画
@keyframes shake-interval {
  0% {
    transform: rotate(0deg);
  }
  2%,
  4%,
  6%,
  8%,
  10% {
    transform: rotate(-15deg);
  }
  3%,
  5%,
  7%,
  9% {
    transform: rotate(15deg);
  }
  11%,
  100% {
    transform: rotate(0deg);
  }
}

.message-list {
  max-height: 500px;
  overflow-y: auto;

  .message-container {
    .message-item {
      padding: 15px;
      border-bottom: 1px solid #e8e8e8;
      cursor: pointer;
      transition: all 0.3s;
      background-color: #fff;

      &:hover {
        background-color: #f5f7fa;
      }

      &.unread {
        background-color: #ecf5ff;

        &:hover {
          background-color: #d9ecff;
        }
      }

      &:last-child {
        border-bottom: none;
      }

      .message-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;

        .message-title {
          font-weight: bold;
          font-size: 14px;
          color: #303133;
        }

        .message-time {
          font-size: 12px;
          color: #909399;
        }
      }

      .message-content {
        font-size: 13px;
        color: #606266;
        line-height: 1.5;
        margin-bottom: 8px;
        word-break: break-all;
      }

      .message-footer {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

// 滚动条样式
.message-list::-webkit-scrollbar {
  width: 6px;
}

.message-list::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;

  &:hover {
    background-color: #c0c4cc;
  }
}

.message-list::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}
</style>
